<template>
	<view class="select-supervisor">
		<navBar title="选择人员" @goBack="uni.navigateBack()"></navBar>
		<view class="search">
			<u-search @search="confirmSearch" @change="confirmSearch" v-model="searchForm.keyWord" placeholder="请输入关键字"
				:showAction="false" clearabled height="88upx" />
		</view>
		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height: 'calc(100vh - ' +  containerOutsideHeight + 'px)'}">
			<view class="people-box">
				<u-checkbox-group v-model="selectedPeople" @change="checkboxChange">
					<view class="special-work-personnel-list">
						<view v-for="(item, index) in supervisorArray" :key="index">
							<view class="list-item">
								<view style="display: flex; align-items: center;" class="wid-320">
									<view style="box-sizing: border-box; padding-right: 18upx;">
										{{item.name}}
									</view>
								</view>
								<u-checkbox shape="circle" :name="item.userId"
									activeBackgroundColor="#2979ff" class="checkbox"></u-checkbox>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<view class="footer-button">
				<view class="button-placeholder"></view>
				<view class="button-group">
					<view @click="clickConfirmBtn" :loading="isLoading" class="button-primary">确定</view>
				</view>
			</view>
			<u-empty v-if="!supervisorArray.length" mode="data" text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { handleFormatDate, compareDate } from "@/utils/date.js";
	import { getConstructionTeam } from '@/api/engineeringMaintenance/engineeringMaintenance.js'
	import { mjsPicketBase_list } from "@/api/mjs.js"
	export default {
		name: "multiple-select",
		watch:{
			'searchForm.keyWord':{
				deep: true,
				async handler(newVal,oldVal){
					if(newVal){
						 this.supervisorArray =  this.supervisorArray.filter(product => 
						    product.name.toLowerCase().includes(newVal.toLowerCase())
						  );
					}else if(!newVal) {
						this.paging.pageNum = 1;
						this.supervisorArray = await this.getSafetySupervisorArray();
					}
				},
				immediate:true,
			}
		},
		
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 监管人员列表
				supervisorArray: [],
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				// 是否正在加载中
				isLoading: false,
				// 标准数据id列表
				standardDataIds: [],
				selectedPeople: [],
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		onLoad(option) {
			console.log('onLoad')
		},
		async mounted() {
			console.log('mounted')
			this.initContainerData();
			this.supervisorArray = await this.getSafetySupervisorArray();
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendMultipleData', (item) => {
				console.log(item.data, 'sendMultipleData')
				this.selectedPeople = item.data
			})
			this.eventChannel = eventChannel
		},
		methods: {

			checkboxChange(e) {
				this.selectedPeople = e
			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight;
			},
			/** 获取人员列表信息 */
			getSafetySupervisorArray() {
				return new Promise(resolve => {
					getConstructionTeam({id: uni.getStorageSync('isOwner')}).then(async res => {
						console.log(res, 'res')
						// const { list, total } = res.result;
						resolve(res.result);
					});
				});
			},
			getName(arr,arr2, code) {
				arr = [...arr, ...arr2]
				let name = ''
				if (arr && arr.length > 0) {
					name = arr.find(it => it.code === code) ? arr.find(it => it.code === code).name : ''
				}
				return name
			},

			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if (!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.supervisorArray = this.supervisorArray.concat(await this.getSafetySupervisorArray());
					this.isLoading = false;
				}
			},

			/** 点击确认按钮 */
			clickConfirmBtn() {
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit("getMultipleData", {
							data: this.supervisorArray.filter(it => this.selectedPeople.includes(it.userId)) || []
						})
					}
				});
			},

			/** 确认搜索 */
			async confirmSearch() {
				// this.paging.pageNum = 1;
				// this.supervisorArray = await this.getSafetySupervisorArray();
			},
		}
	}
</script>

<style scoped lang="scss">
	.select-supervisor {
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
		.search {
			padding: 42upx 36upx 14upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
			z-index: 1;
		}

		.u-checkbox-group {
			display: block;
		}

		.checkbox {
			::v-deep .uni-checkbox-input {
				border-radius: 50%;
			}
		}

		.select-supervisor-list {
			padding: 0 36upx 0 28upx;
			color: #445469;
			font-weight: 500;
			width: 100%;

			.list-item {

				padding: 40upx;
				border-bottom: 1px solid #e2e5ed;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			::v-deep .u-radio-group {
				flex: initial;

				.u-radio__icon-wrap {
					margin-right: 0;
				}
			}
		}
	}

	.special-work-personnel-list {
		padding: 0 36upx 0 28upx;
		color: #445469;
		font-weight: 500;
		/* #ifdef MP-WEIXIN */
		width: 100%;
		/* #endif */
		.list-item {
			/* #ifdef APP-PLUS || H5 */
			padding: 40upx 18upx 34upx 28upx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding: 42upx 36upx 14upx 28upx;
			/* #endif */
			border-bottom: 1px solid #e2e5ed;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wid-320 {
				/* #ifdef APP-PLUS || H5 */
				width: calc(100% - 44upx);
				/* #endif */

				/* #ifdef MP-WEIXIN */
				width: calc(100% - 44upx);
				/* #endif */
			}
		}

		::v-deep .u-radio-group {
			flex: initial;

			.u-radio__icon-wrap {
				margin-right: 0;
			}
		}
	}
	.people-box {
		/* #ifdef H5 */
		height: 100%;
		/* #endif */
	}
</style>